<template>
    <div class="statistic_box">
            <div class="statistic_item">
                <Avatar :size="statistic_size" :style="style">
                    <template #icon>
                        <FileDoneOutlined :style="iconColor" />
                    </template>
                </Avatar>
                <Statistic :value="160897" :value-style="iconColor" class="statistic_item_font">
                    <template #suffix>
                        <PlusOutlined :style="iconColor" />
                    </template>
                </Statistic>
                <p>文档转换</p>
            </div>
            <div class="statistic_item">
                <Avatar :size="statistic_size" :style="style">
                    <template #icon>
                        <CodeOutlined :style="iconColor" />
                    </template>
                </Avatar>
                <Statistic :value="7062498112" :value-style="iconColor" class="statistic_item_font">
                    <template #suffix>
                        <PlusOutlined :style="iconColor" />
                    </template>
                </Statistic>
                <p>代码解析、格式化</p>
            </div>
            <div class="statistic_item">
                <Avatar :size="statistic_size" :style="style">
                    <template #icon>
                        <VideoCameraAddOutlined :style="iconColor" />
                    </template>
                </Avatar>
                <Statistic :value="549682" :value-style="iconColor" class="statistic_item_font">
                    <template #suffix>
                        <PlusOutlined :style="iconColor" />
                    </template>
                </Statistic>
                <p>音视频转换</p>
            </div>
            <div class="statistic_item">
                <Avatar :size="statistic_size" :style="style">
                    <template #icon>
                        <LinkOutlined :style="iconColor" />
                    </template>
                </Avatar>
                <Statistic :value="92554" :value-style="iconColor" class="statistic_item_font">
                    <template #suffix>
                        <PlusOutlined :style="iconColor" />
                    </template>
                </Statistic>
                <p>短链接生成</p>
            </div>
        </div>
</template>
<script lang="ts" setup>
import {Button,Tabs,TabPane,Card,CardMeta,CardGrid,TypographyTitle,RadioGroup,RadioButton,Flex,Avatar,Statistic,Space} from 'ant-design-vue'
import {CheckCircleOutlined,RetweetOutlined,CodeOutlined,VideoCameraAddOutlined,LinkOutlined,PlusOutlined,FileDoneOutlined} from '@ant-design/icons-vue'

const statistic_size = 60
const style = {
    backgroundColor:"#F3F4F6"
}
const iconColor={
    color:"#7741e1"
}
</script>
<style lang="scss" scoped>
.statistic_box{
        background-color: #6622E0;
        padding: 40px 0;
        position: relative;
        box-shadow:4.8px 3.6px 10px rgba(0, 0, 0, 0.03),38px 29px 80px rgba(0, 0, 0, 0.06);
        top: -100px;
        left: 50%;
        margin-left: calc(-1 * $content-body-width / 2);
        width: $content-body-width;
        border-radius: 10px;
        border: 3px solid #8240F8;
        color: rgba($color: #fff, $alpha: 0.3);
        @include flex_row;
        .statistic_item{
            flex: 1;
            text-align: center;
            p{
                font-size: 14px;
                margin: 10px 0 10px;
                @include font_color("main-index-about-font");
            }
            .statistic_item_font{
                :deep(.ant-statistic-content){
                    font-size: 26px;
                    font-weight: 500;
                    margin: 20px 0 10px;
                    .ant-statistic-content-suffix{
                        font-size: 12px;
                    }
                }

            }
        }
    }
</style>